<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" href="./css/base.css">
	<link rel="stylesheet" href="./css/hardware.css">
	<link rel="icon" href="./img/favicon.ico">
	<title>咪咕周边</title>
</head>
<body>
	<div class="container_fluid">
	<!-- f1 -->
		<div class="f1">
			<div class="container">
				<div class="row">
					<div class="col-1">
						<img src="img/220129162755135_94x26_4939.png" >
					</div>
					<div class="col-7">
						<ul>
							<li ><a href="#">音乐</a></li>
							<li ><a href="#">现场</a></li>
							<li><a href="vip.html">
							<img src="./img/皇冠.png" >
							会员中心
							</a></li>
							<li><a href="fanxiang.html">凡响计划</a></li>
							<li><a href="#">客户端下载</a></li>
						</ul>
					</div>
					<div class="col-4">
						<input placeholder="搜索歌曲、歌手、MV">
						<div>
						<img src="./img/no-login.png" >
					<div class="log_popup">
						<p><span>一</span>登录后可专享<span>一</span></p>
						<div class="row">
							<div class="col-4">
								<img src="./img/乐谱编辑.png">
								<p>试听记录同步</p>
							</div>
							<div class="col-4">
								<img src="./img/彩铃.png">
								<p>订购酷炫铃音</p>
							</div>
							<div class="col-4">
								<img src="./img/无损音质.png">
								<p>下载无损音乐</p>
							</div>
						</div>
						<div class="row">
							<div class="col-6">
								<span class="lgin">登陆</span>
								</div>
							<div class="col-6">
								<span><a href="login.html">注册</a></span>
								</div>
						</div>
					</div>
					</div>
					</div>
				</div>
			</div>
		</div>
		<div id="logincover">
			<div class="login-inter">
				<img src="./img/关闭.png" id="clo">
				<a href="login.html">去注册</a>
				<div class="row">
					<div class="cur" id="col">短信登录</div>
					<div id="col">密码登陆</div>
					<div id="col">SIM登录</div>
				</div>
				<div id="hint">
					<img src="./img/err.png" >
					<img src="img/ok.png" >
					<span>手机号格式不正确</span>
					<span>手机号可用</span>
				</div>
				<div id="phon">
				<input placeholder="手机号">
				<div class="row">
					<div class="col-7">
						<input placeholder="请输入验证码"/>
					</div>
					<div class="col-5">
						<p>获取验证码</p>
					</div>
				</div>
				<p>登录</p>
				</div>
				<div id="pwd">
					<input placeholder="手机号/邮箱/用户名">
					<input placeholder="密码">
					<div id="sign">
							<div class="col">
								<input type="checkbox"/>
								<span>自动登录</span>
							</div>
							<div class="col">
								<span>忘记密码</span>
								<span>|</span>
								<a href="login.html">注册</a>
							</div>
					</div>
					<div id="tisi">
					<img src="./img/err.png" >
					<img src="img/ok.png" >
					<span>密码长度在5~12位</span>
					<span>密码长度符合</span>
					</div>
					<p>登录</p>
					<span>手机号或密码不正确</span>
				</div>
				<div id="SIM">
					<input placeholder="手机号">
					<p>登录</p>
					<span>温馨提示：</span>
					<span>1.“SIM登录” 是由中国移动提供的PC端安全登录服务</span>
					<span>2.输入手机号点击 “登录”，即可在手机上查看登录请求，并使用手机进行登录授权</span>
				</div>
				<div class="text">
					登录即同意<span>《咪咕用户服务协议》</span>
					和<span>《咪咕隐私权政策》</span>
				</div>
			</div>
		</div>
		<!-- f2 -->
		<div class="f2">
			<div class="container">
				<ul class="cur">
					<li><a href="homepage.html">首页</a></li>
					<li><a href="playlist.html">歌单</a></li>
					<li><a href="special-issue.html">专辑</a></li>
					<li><a href="hot.html">榜单</a></li>
					<li><a href="singer.html">歌手</a></li>
					<li><a href="crbt.html">彩铃</a></li>
					<li><a href="#">咪咕周边</a></li>
				</ul>
				<ul>
					<li><a href="#">首页</a></li>
					<li><a href="#">演唱会</a></li>
					<li><a href="#">独家放送</a></li>
					<li><a href="#">MV</a></li>
				</ul>
			</div>
		</div>
	</div>
	<!-- f3 -->
	<div class="f3">
		<div class="tbody">
			<a href="https://item.jd.com/10031635406917.html"><img src="./img/210615162738811_1920x720_890.jpg"></a>
			<a href="https://item.jd.com/10031634622158.html"><img src="./img/210615162810688_1920x720_5130.jpg"></a>
			<a href="https://item.jd.com/10031928895631.html"><img src="./img/210615162833786_1920x720_9679.jpg"></a>
		</div>
	</div>
	<!-- f4 -->
	<div class="f4">
		<div class="container">
			<div class="row">
				<div class="col-9">
					<div class="row">
						<div class="col-4">
							<ul>
								<li><p>咪咕文化</p></li>
								<li><a href="#">咪咕文化官网</a></li>
								<li><a href="#">咪咕音乐简介</a></li>
								<li><a href="#">服务协议</a></li>
								<li><a href="#">隐私权政策</a></li>
							</ul>
						</div>
						<div class="col-4">
							<ul>
								<li><p>咪咕音乐家族</p></li>
								<li><a href="#">圈子彩铃</a></li>
							</ul>
						</div>
						<div class="col-4">
							<ul>
								<li><p>联系我们</p></li>
								<li><a href="#">业务合作</a></li>
								<li><a href="#">常见问题</a></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="col-3">
					<p>咪咕音乐</p>
					<div class="row">
						<div class="col-6">
							<img src="img/20101209435723_300x300_1190.png" >
							<p>咪咕音乐</p>
						</div>
						<div class="col-6">
							<img src="img/201012094413724_300x300_8080.png" >
							<p>咪咕视频</p>
						</div>
					</div>
				</div>
			</div>
				<img src="img/201012095135561_48x48_9661.png" >
				<div class="ending">
					<div class="ending-left">
						<span>蜀ICP备15012512号</span>
						<span>川网文[2019]2118-124</span>
						<span>网络视听许可证0112648号1</span>
						<span>增值业务许可证A2.B1.B2-2010000</span>
						<span>川公网安备 51010702002209号</span>
					</div>
					<p>Copyright © 2005 - 2022 咪咕音乐有限公司</p>
				</div>
		</div>
	</div>
	<script src="./jquery-3.6.0.js"></script>
	<script>
	$('.container_fluid').on('mouseover','a',function(){
		if($(this).text()=='现场'){
			$('.f2 ul:last-child').prop('class','cur').siblings().prop('class','')
		}
		if($(this).text()=='音乐'){
			$('.f2 ul:first-child').prop('class','cur').siblings().prop('class','')
		}
	})
	$('.container_fluid').mouseleave(function(){
			$('.f2 ul:first-child').prop('class','cur').siblings().prop('class','')
	})
	$('.f1 .container>.row>.col-4>div').mouseover(function(){
		$('.f1 .log_popup').stop(true).show(300)
	})
	$('.f1 .container>.row>.col-4>div').mouseleave(function(){
		$('.f1 .log_popup').stop(true).hide(300)
	})
	const lgin=document.querySelector('.lgin')
	lgin.onclick=()=>{
			logincover.style=`display: flex;`
		}
		clo.onclick=()=>{
			logincover.style=`display: none;`
		}
		$('.login-inter>div>input:first-child').on('input',function(){
				if($(this).val()==''){
					$('#hint').prop('class','')
					return
				}
			if(/^1[3-9]\d{9}$/.test($(this).val())){
				$('#hint').prop('class','ok')
			}else{
				$('#hint').prop('class','err')
			}
		})
		$('.login-inter>div>input:first-child').blur(function(){
			$('#hint').prop('class','')
		})
		$('#pwd>input:nth-of-type(2)').on('input',function(){
			const l=$(this).val()
			if(l==''){
				$('#tisi').prop('class','')
				return
			}
			if(l.length>12 || l.length<5){
				$('#tisi').prop('class','err')
			}else{
				$('#tisi').prop('class','ok')
			}
		})
		$('#pwd>input:nth-of-type(2)').blur(function(){
			$('#tisi').prop('class','')
		})
		// $('#pwd>p').click(function(){
		// 	let p=$('#pwd>input:first-child').val()
		// 	let w=$('#pwd>input:nth-of-type(2)').val()
		// 	let xhr=new XMLHttpRequest()
		// 	xhr.open('get','/v1/log/lg?phone='+p+'&pwd='+w)
		// 	xhr.send()
		// 	xhr.onload=()=>{
		// 		console.log(xhr.responseText)
		// 		if(xhr.responseText=='err'){
		// 			$('#pwd>span').prop('class','err')
		// 		}
		// 	}
		// })
		$('.login-inter>.row').on('click','div',function(){
			$(this).addClass('cur').siblings().removeClass('cur')
			if($(this).text()=='短信登录'){
				phon.style.display=''
				pwd.style.display='none'
				SIM.style.display='none'
			}
			if($(this).text()=='密码登陆'){
				phon.style.display='none'
				pwd.style.display='block'
				SIM.style.display='none'
			}
			if($(this).text()=='SIM登录'){
				phon.style.display='none'
				pwd.style.display='none'
				SIM.style.display='block'
			}
		})
	</script>
</body>
</html>
